<template>
	<div ref="Goods">
		<el-dialog title="商品" :visible.sync="dialogFormVisible" :close-on-press-escape="false"
			:close-on-click-modal="false" @closed="afterCloseDialog">
			<el-form :model="goodsForm" ref="goodsForm" :rules="formRules" label-width="100px">
				<el-form-item label="商品名称" prop="goodsName">
					<el-input v-model="goodsForm.goodsName" maxlength="500" style="width: 400px;"></el-input>
				</el-form-item>
				<el-form-item label="商品类别" prop="categoryId">
					<el-select v-model="goodsForm.categoryId" placeholder="请选择">
						<el-option v-for="item in categoryList" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品标签" prop="tag">
					<div style="float: left;">
						<el-tag v-for="(item, index) in tagList" :key="index" closable @close="removeTag(item,index)" style="margin-right: 5px; height: 32px; line-height: 30px;">{{item}}</el-tag>
						<el-input v-model="newTag" maxlength="6" @change="tagChange" style="width: 120px;"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="库存" prop="remainCount">
					<el-input-number v-model="goodsForm.remainCount" :min="1" :max="1000"></el-input-number>
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-input-number v-model="goodsForm.price" :precision="2" :step="0.1" :min="0.1"></el-input-number>
				</el-form-item>
				<el-form-item label="商品缩略图" prop="thumbImage">
					<UploadAvatar v-if="dialogFormVisible" :url="goodsForm.thumbImage" @success="getThumb"></UploadAvatar>
				</el-form-item>
				<el-form-item label="商品banner图" prop="bannerImages">
					<Upload v-if="dialogFormVisible" :url="goodsForm.bannerImages" :limit="4" @success="getBannerImages"></Upload>
				</el-form-item>
				<el-form-item label="商品详情" prop="description">
					<CuEditor v-if="dialogFormVisible" :content="goodsForm.description" @success="getDescription"></CuEditor>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">返回</el-button>
				<el-button type="primary" @click="saveForm">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import UploadAvatar from '@/components/UploadAvatar'
import Upload from '@/components/Upload'
import CuEditor from '@/components/CuEditor'
export default {
	name: "Goods",
	components: {
		UploadAvatar,
		Upload,
		CuEditor
	},
	data() {
		return {
			dialogFormVisible: false,
			goodsForm: {
				categoryId: null,
				goodsName: null,
				tag: null,
				desc: null,
				thumbImage: null,
				bannerImages: null,
				remainCount: null,
				price: null
			},
			tagList: [],
			newTag: '',
			categoryList: [],
			formRules: {
				categoryId: [{ required: true, message: "请输入商品类别" }],
				name: [{ required: true, message: "请输入商品名称" }],
				remainCount: [{ required: true, message: "请输入商品库存" }],
				price: [{ required: true, message: "请输入商品价格" }],
				thumbImage: [{ required: true, message: "请上传商品缩略图" }]
			}
		};
	},
	methods: {
		initForm(id) {
			if (id) {
				this.goodsForm.id = id;
				this.$api.post('/goods/getById', {id:id}).then(response => {
					this.dialogFormVisible = true;
					let goods = response.data;
					this.goodsForm = goods;
					this.tagList = this.goodsForm.tag.split(',');
				});
			} else {
				this.dialogFormVisible = true;
			}
			this.$api.post('/goodsCategory/findAll').then(res=>{
				this.categoryList = res.data;
			})
		},
		tagChange(val){
			if(val){
				this.tagList.push(val);
			}
			this.newTag = '';
		},
		removeTag(item, index){
			if(item){
				this.tagList.splice(index, 1);
			}
		},
		getThumb(e){
			this.goodsForm.thumbImage = e;
		},
		getBannerImages(e){
			this.goodsForm.bannerImages = e;
		},
		getDescription(e){
			this.goodsForm.description = e;
		},
		saveForm() {
			let url = '/goods/add';
			if (this.goodsForm.id) {
				url = '/goods/update';
			}
			
			this.$refs.goodsForm.validate(valid => {
				if (valid) {
					
					if(this.tagList.length > 0){
						this.goodsForm.tag = this.tagList.join()
					}
					
					this.$api.post(url, this.goodsForm).then(response => {
						if (response.success) {
							this.$message.success(response.message);
							this.dialogFormVisible = false;
							this.$parent.handleSearch();
						} else {
							this.$message.error(response.message);
						}
					});
				}
			});
		},
		afterCloseDialog() {
			this.goodsForm = {
				categoryId: null,
				goodsName: null,
				tag: null,
				description: null,
				thumbImage: null,
				bannerImages: null,
				remainCount: null
			};
			this.tagList = [];
			this.$refs.goodsForm.resetFields();
		}
	}
};
</script>